<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas-demos</title>

    <style>
        canvas {
            margin: 0 auto;
            border: 2px solid #aaa;
            display: block;
        }
    </style>
</head>

<body>
<canvas id="cont" width="500px" height="500px">浏览器不支持</canvas>
<!--只能使用原生的js,如果让canvas左右居中使用display:block-->
<script>
    // 固定start获取画布
    const canvas = document.querySelector('#cont')
    // 获取画布上下文
    const ctx = canvas.getContext('2d')
    // 固定end

    // 画坐标系
    ctx.beginPath()
    ctx.moveTo(100, 100)
    ctx.lineTo(100, 400)
    ctx.lineTo(400, 400)
    ctx.stroke()
    ctx.closePath()

    // 画矩形
    // ctx.fillStyle = 'black'
    // ctx.fillRect(120, 200, 20, 200)
    // ctx.fillRect(160, 200, 20, 200)
    // ctx.fillRect(200, 200, 20, 200)
    // ctx.fillRect(240, 200, 20, 200)

    for (let i = 0; i < 7; i++) {
        // 随机颜色
        // ctx.fillStyle = '#' + parseInt((Math.random() * 0xFFFFFF).toString()).toString(16)
        ctx.fillStyle = `rgb(${parseInt((Math.random() * 256).toString())},${parseInt((Math.random() * 256).toString())},${parseInt((Math.random() * 256).toString())})`
        // 柱状图y值从[10,290]随机
        const height = Math.random() * 280 + 10
        // 400为总高度
        ctx.fillRect(120 + i * 40, 400 - height, 20, height)
    }


</script>
</body>
</html>
